<template>
  <div class="container">
    <van-card
      v-for="item of carts"
      :key="item.id"
      :price="item.productPrice"
      :desc="item.productInfo"
      :title="item.productName"
      :thumb="item.productCover"
    >
      <template #footer> 
        <van-checkbox class="btn" v-model="item.isSelected" @change="changeItem"></van-checkbox>
        <span>小计：{{item.productCount*item.productPrice|handleAllPrice}} </span>
        
      </template>
      <template #num>
          <van-stepper v-model.number="item.productCount" />
      </template>
    </van-card>
    <van-submit-bar :price="sum()" button-text="提交订单">
      <van-checkbox @click="changeAll" v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>

export default {
  data() {
    return {
      carts: [],
      allChecked:true
    };
  },
  mounted() {
    this.$http("http://47.108.197.28:8000/cart").then((res) => {
      this.carts = res.data;
    });
  },
  filters:{
    handleAllPrice(val){
      // console.log(val);
      return val.toFixed(2)
    }
  },
  methods:{
    sum(){
      var carts = this.carts;
      var sum =0;
      carts.forEach(item=>{
        if(item.isSelected){
          sum+=item.productCount*item.productPrice;
        }
      })
      sum=sum*100;
      return sum;
    },
    changeAll(){
      this.carts.forEach(item=>item.isSelected=this.allChecked)
    },
    changeItem(){
      this.allChecked = this.carts.every(item=>item.isSelected)
    }
  }
};
</script>

<style scoped>
.container {
  width: 60%;
  margin: auto;
}
.btn{
  position: absolute;
  top: 35%;
  left: 5%;
}
.van-card__header{
  padding-left: 60px !important;
}
.van-submit-bar__bar{
   width: 60%;
  margin: auto;
}
</style>
